<script setup lang="ts">
    import { ref, reactive, toRefs, watch, computed,onMounted } from 'vue';
    // 由于有vue2和vue3的项目，VsCode同时使用了vetur和volar插件有冲突导致的提示。这也是能正常运行但爆红的原因
    import publicTitle from '@/components/publicTitle.vue';
    import publicScrollView from '@/components/publicScrollView.vue';
    // 搜索
    const search = ()=>{
        console.log('search');
    }

    const list:any = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = ref(false);

    const onLoad = () => {
      setTimeout(() => {
        if (refreshing.value) {
          list.value = [];
          refreshing.value = false;
        }

        for (let i = 0; i < 10; i++) {
          list.value.push(list.value.length + 1);
        }
        loading.value = false;

        if (list.value.length >= 40) {
          finished.value = true;
        }
      }, 1000);
    };

    // 下拉加载函数
    const onRefresh = () => {
        console.log('下拉加载');
      // 清空列表数据
      finished.value = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true;
      onLoad();
    };
</script>

<template>
    <div class="queryList">
        <public-scroll-view >
            <template v-slot:scrollViewTop>
                <public-title tit="查询">
                    <template v-slot:right>
                       <img class="cx_icon" src="@/assets/images/cx_icon_shaixuan.png" alt="">
                    </template>
                </public-title>
                <!-- CX_icon_search -->
                <div class="search-box">
                    <div class="search-con">
                        <img class="search-icon" src="@/assets/images/CX_icon_search.png" alt="">
                        <input type="text" class="search-input" placeholder="输入内容进行查询" >
                        <div class="search-line"></div>
                        <div class="search-btn" @click="search">搜索</div>
                    </div>

                </div>
            </template>

            <template v-slot:scrollViewContent>
                <div class="content">
                    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                        <van-list
                            v-model:loading="loading"
                            :finished="finished"
                            finished-text="没有更多了"
                            @load="onLoad"
                        >
                            <div class="list-box">
                                <div class="list-item">
                                    <div class="list-item-tit-box">
                                        <div class="list-item-tit">
                                            建筑工地夜间施工
                                        </div>
                                        <div class="list-item-tips">
                                            办理中
                                        </div>
                                    </div>
                                    <div class="list-item-info">
                                        <span class="info">投诉人：李明宇</span>
                                        <span class="info">投诉时间：025-05-21</span>
                                    </div>
                                </div>

                                <div class="list-item">
                                    <div class="list-item-tit-box">
                                        <div class="list-item-tit">
                                            建筑工地夜间施工
                                        </div>
                                        <div class="list-item-tips">
                                            办理中
                                        </div>
                                    </div>
                                    <div class="list-item-info">
                                        <span class="info">投诉人：李明宇</span>
                                        <span class="info">投诉时间：025-05-21</span>
                                    </div>

                                    <div class="feedback-box">
                                        <img src="@/assets/images/cx_icon_yjst.png" alt="">
                                        反馈剩余3天
                                    </div>
                                </div>
                                <div class="list-item">
                                    <div class="list-item-tit-box">
                                        <div class="list-item-tit">
                                            建筑工地夜间施工
                                        </div>
                                        <div class="list-item-tips">
                                            办理中
                                        </div>
                                    </div>
                                    <div class="list-item-info">
                                        <span class="info">投诉人：李明宇</span>
                                        <span class="info">投诉时间：025-05-21</span>
                                    </div>
                                
                                    <div class="feedback-box urgent">
                                        <img src="@/assets/images/cx_icon_yjyt.png" alt="">
                                        反馈剩余1天
                                    </div>
                                </div>
                                <div class="list-item">
                                    <div class="list-item-tit-box">
                                        <div class="list-item-tit">
                                            建筑工地夜间施工
                                        </div>
                                        <div class="list-item-tips finished">
                                            已办结
                                        </div>
                                    </div>
                                    <div class="list-item-info">
                                        <span class="info">投诉人：李明宇</span>
                                        <span class="info">投诉时间：025-05-21</span>
                                    </div>
                                </div>
                            </div>
                        </van-list>
                    </van-pull-refresh>
                </div>
            </template>
        </public-scroll-view>
    </div>
</template>

<style lang="less" scoped>
    .queryList{
        height: 100vh;
        background: #f5f5f5;
        .cx_icon{
            width: 50px;
            height: 52px;
        }
        .search-box{
            height: 140px;
            background: #fff;
            padding-top: 25px;
            box-sizing: border-box;
            .search-con{
                width: 1070px;
                height: 91px;
                border: 2px solid #0E70EF;
                border-radius: 46px;
                margin: 0px auto;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                padding-left: 35px;
                .search-icon{
                    width: 42px;
                    height: 42px;
                }
                .search-input{
                    border: none;
                    height: 80px;
                    background: none;
                    font-size: 42px;
                    margin-left: 12px;
                    flex: 1;
                    display: block;
                }
                .search-line{
                    width: 3px;
                    height: 59px;
                    background: #EEEEEE;
                }
                .search-btn{
                    width: 154px;
                    text-align: center;
                    line-height: 88px;
                    color: #0E70EF;
                    font-size: 42px;
                    font-weight: bold;
                }
            }
        }

        .content{
            padding: 30px;
            .list-box{
                .list-item{
                    margin-bottom: 30px;
                    background: #fff;
                    border-radius: 30px;
                    padding: 65px 58px 55px 58px;
                    .list-item-tit-box{
                        display: flex;
                        align-items: center;

                    }
                    .list-item-tit{
                        height: 52px;
                        font-weight: bold;
                        font-size: 50px;
                        color: #191919;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        line-height: 52px;
                        flex: 1;
                        margin-right: 40px;
                    }
                    .list-item-info{
                        font-size: 44px;
                        color: #656565;
                        margin-top: 50px;
                        .info{
                            margin-right: 116px;
                        }
                    }
                    .list-item-tips{
                        color: #103363;
                        font-size: 36px;
                        border-radius: 10px;
                        height: 80px;
                        text-align: center;
                        line-height: 80px;
                        background: #B9D8FE;
                        display: inline-block;
                        padding: 0px 28px;
                    }
                    .finished{
                        background: #D7D7D7;
                        color: #585858;
                    }

                    .feedback-box{
                        height: 80px;
                        padding: 0px 20px 0px 30px;
                        display: inline-block;
                        background: #FFF4E6;
                        border-radius: 10px;
                        line-height: 80px;
                        font-size: 36px;
                        color: #662813;
                        margin-top: 60px;
                        img{
                            width: 61px;
                            height: 68px;
                            margin-top: 12px;
                            margin-right: 8px;
                            float: left;
                        }
                    }
                    .urgent{
                        background: #FFEAEC;
                        color: #661F13;
                    }
                }
            }
        }
    }
</style>